import { DownOutlined, PoweroffOutlined, SoundOutlined, UserOutlined } from '@ant-design/icons'
import { Button, Divider, Dropdown, Switch } from 'antd'
import { connect } from 'dva'

import LocalCachePack from '@/components/LocalCachePack'
import { navigateTo } from '@/router/navigate'
import { modal } from '@/utils/antdHelper'
import { getBasicFn } from '@/utils/dvaUtil/index'

import AddNewPage from '../AddNewPage'

import Notice from './components/Notice'

import './index.less'

const { toAction } = getBasicFn({ namespace: 'app' })
const { toAction: noticeToAction } = getBasicFn({ namespace: 'notice' })

/**
 * @param {{
 *    app: import('@/models/app').state,
 *    notice: import('@/models/app/notice').state
 * }} param0
 */
const Header = ({ app, notice }) => {
  const { loginInfo, userInfo } = app
  const { organizationName, fullName } = userInfo || {}

  const { voiceReminder, noticeOpen } = notice

  const dropdownMenu = [
    !loginInfo.superAdmin && {
      key: '1',
      icon: <UserOutlined />,
      label: <div onClick={() => navigateTo('personalCenter')}>个人中心</div>,
    },
    {
      key: '2',
      icon: <SoundOutlined />,
      label: (
        <div className='flex items-center' onClick={e => e.stopPropagation()}>
          <span style={{ flexGrow: 1 }}>语音提示</span>
          <LocalCachePack uuid='voiceReminder'>
            <Switch
              checkedChildren='开'
              unCheckedChildren='关'
              checked={voiceReminder}
              onChange={value => {
                noticeToAction({ voiceReminder: value })
              }}
            />
          </LocalCachePack>
        </div>
      ),
    },
    import.meta.env.MODE !== 'production' && {
      key: '3',
      icon: <SoundOutlined />,
      label: (
        <div className='flex items-center' onClick={e => e.stopPropagation()}>
          <span style={{ flexGrow: 1 }}>消息推送</span>
          <Switch
            className='ml10px'
            checkedChildren='开'
            unCheckedChildren='关'
            checked={noticeOpen}
            onChange={value => {
              noticeToAction({ noticeOpen: !noticeOpen })
              if (value) {
                noticeToAction('startWatchUnReadNotices')
              } else {
                noticeToAction('stopWatchUnReadNotices')
              }
            }}
          />
        </div>
      ),
    },
    {
      key: '4',
      icon: <PoweroffOutlined />,
      label: (
        <div
          onClick={() => {
            modal.confirm({
              title: '确定要退出登录吗？',
              onOk: () => {
                toAction('logout')
              },
            })
          }}
        >
          退出登录
        </div>
      ),
    },
  ].filter(item => item)

  return (
    <div className='g-header flex items-center justify-between'>
      <div className='header-left'></div>
      <div className='header-right flex-grow-1 flex items-center justify-end'>
        <Notice />
        <div>{organizationName}</div>
        <Divider type='vertical' className='border-s-#fff' />
        <Dropdown trigger={['click']} menu={{ items: dropdownMenu }}>
          <span className='cursor-pointer' onClick={e => e.preventDefault()}>
            {fullName} <DownOutlined />
          </span>
        </Dropdown>
        {import.meta.env.DEV && (
          <Button
            type='link'
            onClick={() => {
              AddNewPage.PromiseThen()
            }}
          >
            添加页面
          </Button>
        )}
      </div>
    </div>
  )
}

export default connect(({ app, notice }) => ({ app, notice }))(Header)
